92:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GX6nedeuRnEvYjaTZkB3KLfqvjYo"],"SWRDataProvider"] 94:T3d8c,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/skeleton-loader.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" export default function SkeletonLoader() { const [activeBlock, setActiveBlock] = useState(0) const [loadedBlocks, setLoadedBlocks] = useState(0) // Track how many blocks have been loaded const totalBlocks = 5 useEffect(() => { const startAnimation = () => { const interval = setInterval(() => { setActiveBlock((prev) => { if (prev < totalBlocks) { const next = prev + 1 setLoadedBlocks(next) // Update loaded blocks count return next } else { // Animation complete, clear interval and pause clearInterval(interval) setTimeout(() => { setActiveBlock(0) // Reset to start setLoadedBlocks(0) // Reset loaded blocks startAnimation() // Restart the animation }, 2000) return -1 // Clear highlight during pause } }) }, 800) return interval } const interval = startAnimation() return () => clearInterval(interval) }, []) // Empty dependency array to run only once return (

{/* Browser Header */}

{/* Content */}

{/* Title */}

Loading animation...

{/* Top wide block */}

= 1 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 1 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 1 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 1 && (

)}

{/* Middle row - two blocks */}

= 2 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 2 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 2 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 2 && (

)}

= 3 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 3 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 3 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 3 && (

)}

{/* Bottom row - two blocks */}

= 4 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 4 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 4 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 4 && (

)}

= 5 || activeBlock === -1 ? "opacity-100" : "opacity-0" }`} style={{ clipPath: loadedBlocks >= 5 || activeBlock === -1 ? "inset(0 0 0 0)" : "inset(0 100% 0 0)", animation: activeBlock === 5 ? "reveal-block 0.6s ease-out forwards" : "none", }} /> {activeBlock === 5 && (

)}

) } [V0_FILE]typescriptreact:file="components/code-streaming.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" interface CodeSegment { id: number width: number // pixel width color: string animated: boolean } interface CodeLine { id: number segments: CodeSegment[] indent: number completed: boolean } const codeColors = ["bg-blue-400", "bg-gray-400", "bg-teal-400", "bg-purple-400", "bg-green-400", "bg-slate-500"] const linePatterns = [ { segments: [ { width: 80, color: 0 }, { width: 60, color: 1 }, { width: 20, color: 2 }, { width: 120, color: 3 }, ], indent: 0, }, { segments: [ { width: 100, color: 1 }, { width: 140, color: 4 }, ], indent: 1, }, { segments: [ { width: 160, color: 2 }, { width: 90, color: 1 }, { width: 12, color: 0 }, ], indent: 1, }, { segments: [ { width: 70, color: 3 }, { width: 12, color: 1 }, ], indent: 2, }, { segments: [{ width: 120, color: 4 }], indent: 2 }, { segments: [{ width: 90, color: 1 }], indent: 2 }, { segments: [{ width: 110, color: 2 }], indent: 2 }, { segments: [{ width: 12, color: 0 }], indent: 1 }, { segments: [ { width: 140, color: 1 }, { width: 80, color: 3 }, ], indent: 0, }, ] export default function CodeStreaming() { const [lines, setLines] = useState([]) const [currentLine, setCurrentLine] = useState(null) const [headerDots, setHeaderDots] = useState(0) useEffect(() => { let lineId = 0 let patternIndex = 0 let animationRunning = true const animateHeader = () => { if (!animationRunning) return setHeaderDots((prev) => (prev + 1) % 4) setTimeout(animateHeader, 800) } animateHeader() const startNewLine = () => { if (!animationRunning) return const pattern = linePatterns[patternIndex % linePatterns.length] const newLine: CodeLine = { id: lineId++, segments: pattern.segments.map((seg, index) => ({ id: index, width: seg.width, color: codeColors[seg.color], animated: false, })), indent: pattern.indent, completed: false, } setCurrentLine(newLine) patternIndex++ let segmentIndex = 0 const animateNextSegment = () => { if (segmentIndex >= newLine.segments.length) { setLines((prevLines) => [...prevLines.slice(-11), { ...newLine, completed: true }]) setCurrentLine(null) setTimeout(() => { if (animationRunning) { startNewLine() } }, 150) return } setCurrentLine((prev) => { if (!prev) return prev if (segmentIndex >= prev.segments.length) return prev const updated = { ...prev } updated.segments = [...prev.segments] updated.segments[segmentIndex] = { ...prev.segments[segmentIndex], animated: true } return updated }) segmentIndex++ setTimeout(animateNextSegment, 150 + segmentIndex * 50) } setTimeout(animateNextSegment, 100) } startNewLine() return () => { animationRunning = false } }, []) return (

component.tsx

{[0, 1, 2].map((i) => (

))}

{lines.map((line, index) => (

{line.segments.map((segment) => (

))}

))} {currentLine && (

{currentLine.segments.map((segment) => (

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import SkeletonLoader from "@/components/skeleton-loader" import CodeStreaming from "@/components/code-streaming" export default function Home() { return (

) }88:["$","$L92",null,{"chatId":"Enxm2C8Lu0V","children":["$","$L93",null,{"data":{"@\"active-block\",\"Enxm2C8Lu0V\",":{"id":"b_se5A5nRd28J","messageId":"N8BBzykXpXVhW8sY6x63ylf9LJLa6kKF","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"skeleton-loader","type":"code-project","project":"skeleton-loader","taskNameActive":"Making components responsive","taskNameComplete":"Made components responsive"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Enxm2C8Lu0V\",":false,"":null},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from jakeatgalileo

More Templates Like This